<template>
  <div id="login">
    <div class="login-box">
      <h1>企业门户网站管理系统</h1>
      <el-form
        ref="loginFormRef"
        :rules="loginRules"
        :model="loginForm"
        label-width="auto"
        @keyup.enter="submitForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password" autocomplete="off">
          <el-input
            v-model="loginForm.password"
            autocomplete="off"
            type="password"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import router from "@/router";
import axios from "axios";
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";

const store = useStore();

// 表单数据(绑定的响应式对象)
const loginForm = reactive({
  username: "admin",
  password: "123456",
});
// 获取表单实例
const loginFormRef = ref();
// 表单验证规则
const loginRules = reactive({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    {
      min: 5,
      max: 10,
      message: "用户名长度在 3 到 10 个字符",
      trigger: "blur",
    },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 5, max: 18, message: "密码长度在 6 到 18 个字符", trigger: "blur" },
  ],
});

const submitForm = () => {
  // 1. 校验表单
  // 2. 拿到表单内容，提交后台（手动校验）
  // 3. 设置token表单验证通过，执行登录操作
  loginFormRef.value.validate((valid) => {
    if (valid) {
      /**
       * 接口"http://localhost:3000/users"会出现跨域错误；
       * 修改为"/users"(未在vue.config.js中配置反向代理时，会出现404错误)
       */
      axios
        .post("/adminapi/user/login", loginForm)
        .then((res) => {
          if (res.data.ActionType === "OK") {
            store.commit("changeUserInfo", res.data.data);
            store.commit("changeGetterRouter", false);
            router.push("/index");
          } else {
            ElMessage.error("用户名或密码不匹配");
          }
        })
        .catch((error) => {
          console.error(error);
        });
    }
  });
};
</script>

<style scoped lang="scss">
// 页面宽度小于450px时，调整登录框的宽度
@media screen and (max-width: 450px) {
  .login-box {
    width: 90% !important;
  }
}

#login {
  width: 100%;
  height: 100%;
  position: fixed;
  background: linear-gradient(
    30deg,
    rgba(238, 174, 202, 1) 0%,
    rgba(148, 187, 233, 1) 100%
  );

  .login-box {
    width: 400px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

    h1 {
      width: 100%;
      font-size: 24px;
      font-weight: bold;
      margin: 0px 0px 20px;
    }

    :deep() {
      .el-form {
        width: 100%;
      }

      .el-form-item {
        margin-bottom: 25px;
      }

      .el-form-item:last-child {
        margin-bottom: 0px;
      }

      .el-button {
        width: 100%;
      }
    }
  }
}
</style>